<template>
  <div class="DetectionInfo-container">
    <div class="DetectionInfo-title">检测信息统计</div>
    <div class="searchselect">
      <market />
      <dateselect @listenEvent="dtfn" />
      <foottype />
    </div>
    <div class="passenger-num">
      <passnum>
        <template v-slot:header>检测批次</template>
      </passnum>
      <passnum>
        <template v-slot:header>检测品种数</template>
      </passnum>
      <passnum>
        <template v-slot:header>检测摊位数</template>
      </passnum>
      <passnum>
        <template v-slot:header>疑似阳性数</template>
      </passnum>
      <passnum>
        <template v-slot:header>阳性数</template>
      </passnum>
      <passnum>
        <template v-slot:header>合格率</template>
      </passnum>
    </div>

    <div class="form">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="市场名称"></el-table-column>
        <el-table-column prop="cnt" label="检测批次"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="检测品种数"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="检测摊位数"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="疑似阳性数"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="阳性数"></el-table-column>
        <el-table-column prop="dubRemovalCnt" label="合格率"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import market from "@/views/modules/market";
import dateselect from "@/views/modules/dateselect";
import foottype from "@/views/modules/foottype";
import passnum from "@/views/modules/passnum";

export default {
  name: "DetectionInfo",
  components: {
    market,
    dateselect,
    foottype,
    passnum
  },
  data() {
    return {
      tableData: [],
      date: []
    };
  },
  created() {},
  mounted() {
    // this.getstatistics()
  },
  methods: {
    getstatistics() {
      this.$store
        .dispatch("marketInfoMge/getstatistics", this.date)
        .then(data => {
          if (data) {
            console.log(data);
            // this.statisdata=data;
            this.tableData = data.Items;
            this.totalCount = data.total;
          } else {
            this.open4();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dtfn(param) {
      this.date = param;
      // console.log(param)
    }
  }
};
</script>

<style lang="scss" scoped>
.DetectionInfo {
  &-container {
    margin: 20px;
  }
  &-title {
    font-size: 18px;
    line-height: 46px;
    background: white;
    margin-bottom: 15px;
    padding-left: 15px;
  }
  &-body {
    margin-bottom: 20px;
  }
  &-select {
    font-size: 14px;
  }
}
.passenger-num {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #ffffff;
  padding: 20px;
}
.passNum {
  font-size: 25px;
}
.searchselect {
  background: #ffffff;
  margin-bottom: 10px;
  padding: 10px;
  padding-bottom: 1px;
}
::v-deep .el-table th {
  background: #e5e5e5;
  // color: #555;
}
::v-deep .el-table .cell {
  text-align: center;
}
</style>